<template>
<header class="wrap">
    <i class="iconfont icon-left" @click="goBack"></i>
    <span>
        <slot></slot>
    </span>
    <i class="iconfont icon-More" v-if="sm"></i>
</header>
</template>

<script>
export default {
    props: {
        sm: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/common/style/mixin.scss';

header {
    position: fixed;
    width: 100%;
    height: 88px;
    text-align: center;
    line-height: 88px;
    padding: 0 20px;
    font-size: 34px;
    @include boxSizing;
    z-index: 9999;
    background-color: #f7f7f7;

    .iconfont {
        position: absolute;
        top: 0;
        font-size: 50px;
        font-weight: bold;
    }

    .icon-left {
        left: 20px;
    }

    .icon-More {
        right: 20px;
    }
}
</style>
